<template>
	<view class="page-section page-section-gap map-container">
		<map style="width: 100%; height: 100vh;" layer-style='76cc7a0961363f656d8c842340c1bd0c' :show-location='true'
			:latitude="latitude" :longitude="longitude" show-compass :markers="points" :scale="scale"
			@markertap="markertap" @callouttap='callouttap' show-location>
		</map>
		<!-- <view style="width: 100%; height: 5vh; padding:5px;margin: 5px;">
			<u-checkbox-group v-model="checkedList" placement="row" @change="handle_checkedList_change">
				<u-checkbox :label="numberofJLY" active-color="#d81e06" name="敬老院"></u-checkbox>
				<u-checkbox :label="numberofCSYLY" active-color="#1296db" name="城市养老院"></u-checkbox>
				<u-checkbox :label="numberofNCYLY" active-color="#2aa515" name="农村养老院"></u-checkbox>
			</u-checkbox-group>
		</view> -->
	</view>
</template>
<script>
	import {
		QueryEnterInstInfoListAsync,
		// getEnterInstInfo,
		// addEnterInstInfo,
		// updateEnterInstInfo,
		// delEnterInstInfo
	} from "@/api/elder/queryEnter";

	import {
		QueryRTInfoList,
		// addRtInfo,
		// updateRtInfo,
		// getRtInfo,
		// delRtInfo,
		// getAdministrativeDivisions
	} from "@/api/elder/RTInfo";


	import {
		iconObj,
	} from "@/static/icon/iconObj.js";

	export default {
		data() {
			return {
				// checkedList: ["敬老院", "城市养老院", "农村养老院"],
				TotalPoints: [], //所有的点
				points: [], //转换过的点
				latitude: 37.524957, //纬度
				longitude: 111.146425, //经度
				scale: 11, //缩放级别
				marker: [{
						id: 0,
						latitude: 23.13065, //纬度
						longitude: 113.3274, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '天宝大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 1234597,
						latitude: 23.106574, //纬度
						longitude: 113.324587, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//  title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
						//   color:'red',//文本颜色
						//      },
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '广州塔', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					}
				],
			}
		},
		onLoad() {

		},
		onShow() {
			this.loadPoints() //请求机构信息
		},
		computed: {
			// markers() {
			// 	if (this.points.length > 0) {
			// 		//根据checkedList自动筛选符合的点进行展示
			// 		return this.$_.filter(this.points, (o) => {
			// 			return this.checkedList.some((i) => {
			// 				if (i == "敬老院") {
			// 					return o.instLev.indexOf("敬老院") > -1
			// 				} else {
			// 					return i == o.instLev
			// 				}
			// 			});
			// 		});
			// 	} else {
			// 		return []
			// 	}
			// },
			// numberofJLY() {
			// 	if (this.points.length > 0) {
			// 		//根据checkedList自动筛选符合的点进行展示
			// 		return "敬老院" + "(" + this.$_.filter(this.points, (o) => {
			// 			return o.instLev.indexOf("敬老院") > -1
			// 		}).length + ")"
			// 	} else {
			// 		return "敬老院" + "(" + 0 + ")"
			// 	}
			// },
			// numberofCSYLY() {
			// 	if (this.points.length > 0) {
			// 		//根据checkedList自动筛选符合的点进行展示
			// 		return "城市养老院" + "(" + this.$_.filter(this.points, (o) => {
			// 			return o.instLev == "城市养老院"
			// 		}).length + ")"
			// 	} else {
			// 		return "城市养老院" + "(" + 0 + ")"
			// 	}
			// },
			// numberofNCYLY() {
			// 	if (this.points.length > 0) {
			// 		//根据checkedList自动筛选符合的点进行展示
			// 		return "农村养老院" + "(" + this.$_.filter(this.points, (o) => {
			// 			return o.instLev == "农村养老院"
			// 		}).length + ")"
			// 	} else {
			// 		return "农村养老院" + "(" + 0 + ")"
			// 	}
			// },
		},
		methods: {
			loadPoints() {
				QueryRTInfoList({
					pageNum: 1,
					pageSize: 100,
				}).then(response => {
					console.log('response', response)
					this.TotalPoints = response.rows;
					this.setPoints();
				});
			},
			setPoints() {
				this.points = [];
				this.TotalPoints.map(item => {
					item.latitude = item.lat;
					item.longitude = item.lng;
					item.title = item.name;
					item.label = { //自定义标记点上方的气泡窗口 点击有效  
						content: item.name, //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						// borderRadius: 15, //边框圆角
						// borderWidth: '10',
						// bgColor: '#e51860', //背景颜色
						// display: 'ALWAYS', //常显
					};
					item.callout = { //自定义标记点上方的气泡窗口 点击有效  
						content: item.name, //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 15, //边框圆角
						borderWidth: '10',
						bgColor: '#e51860', //背景颜色
						// display: 'ALWAYS', //常显
					}
					item.iconPath = '/static/icon/location_red_64.png'
					// if (item.instLev.indexOf("敬老院") > -1) {
					// 	item.iconPath = '/static/icon/定位_red_64.png'
					// } else if (item.instLev == "城市养老院") {
					// 	item.iconPath = '/static/icon/定位_blue_64.png'
					// } else if (item.instLev == "农村养老院") {
					// 	item.iconPath = '/static/icon/定位_green_64.png'
					// }
					this.points.push(item);
				});
				// console.log('points', this.points)

				console.log('points', this.points)
				console.log('markers', this.markers)
			},

			handle_checkedList_change(list) {
				console.log('list', list)
			},
			//地图点击事件
			markertap(e) {
				console.log("===你点击了标记点===", e)
			},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			}
		}
	}
</script>
<style lang='less' scoped>
	.map-container {
		position: relative;
		overflow: hidden;

		.cover-view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 80rpx;
			color: #484848;
			background-color: #fff;
			background-size: 120rpx 120rpx;
			background-position: center center;
			position: absolute;
			bottom: 100rpx;
			right: 32rpx;
		}

		.cover-image {
			display: inline-block;
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>